<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <style>
        div {
            width: 600px;
            height: 400px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="echarts1"></div>
    <div class="echarts2"></div>
    <script>
        // console.log(echarts);

        //柱状图
        const myEchartsInstance = echarts.init(document.getElementsByClassName('echarts1')[0]);
        myEchartsInstance.setOption({
            title: {
                text: 'Most Frequent Repeats'
            },
            legend: { //图例
                data: ['Frequency'],
            },
            xAxis: { //x轴的配置
                data: ['A', 'AC', 'AAAAT', 'AGGG', 'GC']
            },
            yAxis: {},
            series: { //系列列表
                name: 'Frequency', //与legend.data一致
                type: 'bar', //图表的类型
                data: ['10', '23', '100', '300', '2000'], //图表的数据
            }
        })

        //饼图
        const myEchartsInstance2 = echarts.init(document.getElementsByClassName('echarts2')[0]);
        myEchartsInstance2.setOption({
            title: {
                text: 'Motif size distribution'
            },
            legend: { //图例
                data: ['series'],
            },
            series: { //系列列表
                name: 'series0', //与legend.data一致
                type: 'pie', //图表的类型
                // roseType:'angle',
                data: [{
                    value:706849,
                    name:'Mono'
                },{
                    value:343591,
                    name:'Di'
                },{
                    value:203874,
                    name:'Tri'
                },{
                    value:597432,
                    name:'Tetra'
                },{
                    value:814359,
                    name:'Penta'
                },{
                    value:1914509,
                    name:'Hexa'
                }], //图表的数据
            }
        })
    </script>
</body>

</html>